<template>
  <el-drawer v-model="visibleDrawer" :with-header="false" size="50%">
    <el-form :model="formModel" ref="formRef">
      <el-form-item label="题⽬标题:">
        <el-input style="width:387px !important" v-model="formQuestion.title" placeholder="请输⼊标题"></el-input>
      </el-form-item>
      <el-form-item label="题⽬难度:">
        <QuestionSelector style="width:387px !important" v-model="formQuestion.difficulty" width="100%" placeholder="请选择题⽬难度">
        </QuestionSelector>
      </el-form-item>
      <el-form-item label="时间限制（单位毫秒）:">
        <el-input style="width:300px !important" v-model="formQuestion.timeLimit" placeholder="请输⼊时间限制"></el-input>
      </el-form-item>
      <el-form-item label="空间限制（单位字节）:">
        <el-input style="width:300px !important" v-model="formQuestion.spaceLimit" placeholder="请输⼊空间限制"></el-input>
      </el-form-item>
      <el-form-item label="题⽬内容:">
        <div class="editor">
         <quill-editor placeholder="请输入题目内容" v-model:content="formQuestion.content" content-type="html">

         </quill-editor>
        </div>
      </el-form-item>
      <el-form-item label="题⽬⽤例:">
        <el-input style="width:387px !important" v-model="formQuestion.questionCase" placeholder="请输⼊题⽬⽤例"></el-input>
      </el-form-item>
      <el-form-item label="默认代码块:">
        <code-editor ref="defaultCodeRef" @update:value="handleEditorContent"
        v-model:value="formQuestion.defaultCode"></code-editor>
      </el-form-item>
      <el-form-item label="main函数:">
        <code-editor ref="mainFucRef" @update:value="handleEditorMainFunc"
        v-model:value="formQuestion.mainFuc"></code-editor>
      </el-form-item>
      <el-form-item>
        <el-button class="question-button" type="primary" plain @click="onSubmit()">发布</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>
<script setup>
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'
import CodeEditor from './CodeEditor.vue';
import QuestionSelector from './QuestionSelector.vue';
import { ref, reactive} from 'vue';
import {addQuestionService, getQuestionDetailService,editQuestionService} from '../apis/question'
import { ElMessage } from 'element-plus';
  const visibleDrawer = ref(false);
  const formQuestion = reactive({
  questionId: '',
  title: '',
  difficulty: '',
  content: '',
  questionCase: '',
  timeLimit: '',
  spaceLimit: '',
  defaultCode: '',
  mainFuc: ''
})
//用来检查非空
function validate() {
  let msg = ''
  if (!formQuestion.title) {
    msg = '请添加题目标题'
  } else if (formQuestion.difficulty == '') {
    msg = '请选择题目难度'
  } else if (!formQuestion.timeLimit) {
    msg = '请输入时间限制'
  } else if (!formQuestion.spaceLimit) {
    msg = '请输入空间限制'
  } else if (!formQuestion.content) {
    msg = '请输入题目内容信息'
  } else if (!formQuestion.questionCase) {
    msg = '请输入题目用例名称'
  } else if (!formQuestion.defaultCode) {
    msg = '请输入默认代码'
  } else if (!formQuestion.mainFuc) {
    msg = '请输入main函数'
  } else {
    msg = ''
  }
  return msg
}
  defineExpose({
    open
  })

  const emit = defineEmits(['success']);
  const mainFucRef = ref();
  const defaultCodeRef = ref();

  //打开抽屉组件
  async function open(questionId) {
    visibleDrawer.value = true;

    for (const key in formQuestion) {
      if (Object.prototype.hasOwnProperty.call(formQuestion, key)) {
        formQuestion[key] = '';
      }
    }

    if(questionId) {
      const questionDetail = await getQuestionDetailService(questionId);
      console.log(questionDetail);
      Object.assign(formQuestion,questionDetail.data);
      //这里还需要将子组件代码编辑框给赋值进去
      mainFucRef.value.setAceCode(formQuestion.mainFuc);
      defaultCodeRef.value.setAceCode(formQuestion.defaultCode);
    }
  }

//发布按钮
  async function onSubmit() {
    const errorMessage = validate()
    if (errorMessage) {
      ElMessage.error(errorMessage);
      return false
    }
    const fd = new FormData();
    for (let key in formQuestion) {
      fd.append(key, formQuestion[key])
    }
    console.log(fd);
    if(formQuestion.questionId) {
      await editQuestionService(fd);
      ElMessage.success('编辑成功')
    } else {
       await addQuestionService(formQuestion);
       ElMessage.success('添加成功')
    }
    emit('success','add');
    visibleDrawer.value=false;
  }

//代码编辑组件内容监听
  function handleEditorContent(content) {
    formQuestion.defaultCode = content;
  }

  function handleEditorMainFunc(content) {
    formQuestion.mainFuc = content
  }
</script>
<style lang="scss">
.question-button {
  width: 200px;
}
</style>
